<template>
  <div class="center-w">
    <!-- header -->
    <Tabs sticky v-model:active="params.type" @change="setType">
      <Tab style="height: 93vh" v-for="(item, index) in tabList" :key="index" :title="item">
        <div class="listCon">
          <PullRefresh v-model="refreshing" @refresh="onRefresh">
            <List v-model:loading="isLoading" :finished="finished" :offset="20" :finished-text="listData.items?.length ? '没有更多了' : ''" @load="onLoad">
              <div class="w" v-if="listData.items && listData.items?.length">
                <Cell class="cell-w" @click="see(item.id, item.visitTemplate, item.state)" v-for="(item, index) in listData.items" :key="item.id">
                  <div class="cell">
                    <div class="img">
                      <!-- 头像 -->
                      <Image width="1.12rem" radius="0.3rem" height="1.12rem" :src="item.img" />
                      <div class="cell-items">
                        <!-- 名字和标签 -->
                        <div>
                          <span>{{ item.title }}</span>
                          <!--<Tag plain size="medium" :type="item.visitTemplate == '军品事业部' ? 'primary' : 'success'">{{ item.visitTemplate == "军品事业部" ? "军品" : "贸易" }}</Tag>-->
                          <Tag v-if="item.state == 0" size="medium" type="warning ">草稿</Tag>
                          <Tag v-if="item.requestState == 1" mark type="primary">CRM</Tag>
                        </div>
                        <!-- 时间 -->
                        <span class="date">{{ showCurrentTime(item.time) }} </span>
                      </div>
                    </div>
                    <!-- 右侧按钮 -->
                    <Icon name="arrow" />
                  </div>
                </Cell>
              </div>
              <Empty class="mt3" v-else image-size="80" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" description="暂无数据" />
            </List>
          </PullRefresh>
        </div>
      </Tab>
    </Tabs>
    <Popup :close-on-click-overlay="false" v-model:show="showPopup">
      <!-- 	http://applet.atptest.com/BTHXc4r81717641672190.png?v=1717641672479 -->
      <div style="padding: 0.4rem">
        <Image src="http://applet.atptest.com/BTHXc4r81717641672190.png?v=1717641672479" />
        <div style="display: flex; justify-content: center; flex-direction: column; align-items: center">
          <div style="margin: 0.2rem 0; color: #eb5353">初始化用户信息失败...</div>
          <div>1.请重新进入应用！</div>
          <div>2.刷新应用！</div>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script setup name="trade">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { List, PullRefresh, Cell, Icon, Image, Tab, Tabs, Tag, Empty, Popup } from "vant";

import { showCurrentTime } from "@/utils";
import { getVisitList } from "@/api/index";
import { Local } from "@/utils/storage";

const router = useRouter();

const refreshing = ref(false);
const isLoading = ref(false);
const finished = ref(false);

const isAddTrade = ref(false);

const tabList = ref(["我发出的", "我收到的"]);

// state: 1 贸易事业部    type: 0: 我发出的 1：我收到的  16774612299105815  //16774612299105815
const defaultPageSize = ref(10);
const params = ref({ pageIndex: 0, pageSize: defaultPageSize, type: Local.get("type") || 0, userid: Local.get("userId") });

const listData = ref({
  items: [],
  pageIndex: 1,
  pageSize: defaultPageSize,
  total: 0,
  totalPage: 0,
});

// 查看详情 type：1 代表贸易事业部
const see = (_id, tel, isTag) => {
  // 草稿状态直接去新增  提交成功状态去详情
  router.push({
    path: isTag == 0 ? "/addTroops" : "/detail",
    query: {
      type: tel == "军品事业部" ? 2 : 1,
      id: _id,
    },
  });
};

// 我发出的 我收到的
const setType = async () => {
  listData.value.items = [];
  params.value.pageIndex = 0;
  Local.set("type", params.value.type);
  finished.value = false;
};

const showPopup = ref(false);
const fetchListData = async () => {
  if (!Local.get("userId")) {
    //window.location.reload();
    showPopup.value = true;
  } else {
    showPopup.value = false;
  }
  refreshing.value = false;
  isLoading.value = false;
  let res = await getVisitList(params.value);
  if (res.code == 200 && res.data) {
    if (refreshing.value) {
      refreshing.value = false;
    }
    isLoading.value = false;
    listData.value.items = listData.value.items.concat(res.data.items);
  } else {
    finished.value = true;
    return;
  }
};

const onLoad = async () => {
  console.log("触底");
  isLoading.value = true; // 重点
  params.value.pageIndex++;
  await fetchListData();
};

const onRefresh = () => {
  // 重新加载数据
  finished.value = false;
  // 将 loading 设置为 true，表示处于加载状态
  isLoading.value = true; // 重点
  listData.value.items = [];
  params.value.pageIndex = 1;
  fetchListData();
};

defineExpose({
  isAddTrade,
});
</script>
<style>
@import "../../assets/styles/index.scss";
</style>
<style lang="scss" scoped>
@import "./index.scss";
</style>
